<template lang="html">
  <d2-container>
    <page-header slot="header" ref="pageHeader" @doSearch="doSearch" @doReset="doReset" />

    <!-- 中间内容容器 -->
    <div v-loading="loading" class="loading-wrapper">
      <el-table
        border
        stripe
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="请求方法">
                <span>{{ props.row.method }}</span>
              </el-form-item>
              <el-form-item label="请求参数">
                <span>{{ props.row.params }}</span>
              </el-form-item>
              <el-form-item label="请求地址">
                <span>{{ props.row.url }}</span>
              </el-form-item>
              <el-form-item v-if="props.row.logType === 'ERROR'" label="异常详情">
                <el-button type="text" @click="doSee(props.row.id)">查看</el-button>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column type="index" width="50" label="序号" align="center" />
        <el-table-column prop="username" label="用户名" align="center" min-width="120" />
        <el-table-column
          prop="requestIp"
          label="登录IP"
          align="center"
          show-overflow-tooltip
          min-width="120"
        />
        <el-table-column
          prop="address"
          label="IP来源"
          align="center"
          show-overflow-tooltip
          min-width="120"
        />
        <el-table-column prop="description" label="描述" align="center" min-width="120" />
        <el-table-column prop="browser" label="浏览器" align="center" min-width="120" />
        <el-table-column prop="logType" label="业务类型" align="center" min-width="120" />
        <el-table-column prop="time" label="耗时(ms)" align="center" min-width="60" />
        <el-table-column prop="createTime" label="创建时间" align="center" width="160" />
      </el-table>
    </div>
    <el-dialog :visible.sync="dialog" title="异常详情" append-to-body top="30px" width="85%">
      <pre>{{ errorInfo }}</pre>
    </el-dialog>
    <!-- 底部分页 -->
    <footer-page
      slot="footer"
      :pageSize="pageSize"
      :currentPage="currentPage"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </d2-container>
</template>

<script>
import PageHeader from "./components/page-header";
import { OperLogList, ErrorLogDetail } from "api/sys/log";
import tableMixinKeepAlive from "mixins/tableMixinKeepAlive";

export default {
  name: "system-record",
  components: {
    PageHeader,
  },
  mixins: [tableMixinKeepAlive],
  data() {
    return {
      // 列表接口名
      getTableListSyncMethod: OperLogList,
      errorInfo: "",
      dialog: false,
    };
  },
  methods: {
    /**
     * 格式化获取列表数据
     */
    searchObjFormat() {
      const { startDate } = this.searchObj;
      let tempObj = {};
      if (!startDate) {
        // 默认当前一周的数据
        const currentDate = new Date();
        const targetDate = currentDate - 1000 * 60 * 60 * 24 * 7;
        tempObj = {
          startDate: this.$timeFormat(targetDate),
          endDate: this.$timeFormat(currentDate),
        };
      }
      return {
        ...(!startDate && tempObj),
        ...this.searchObj,
      };
    },
    // 查看异常详情
    async doSee(id) {
      const data = await ErrorLogDetail(id);
      this.dialog = true;
      this.errorInfo = data;
    },
  },
};
</script>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 15px;
  width: 100%;
}
</style>
